<template>
  <div class="progress-section">
    <!-- 处理进度指示器 -->
    <div v-if="processing" class="progress-indicator">
      <el-progress 
        :percentage="progressPercentage" 
        :format="progressFormat"
        :stroke-width="18"
        status="primary"
      ></el-progress>
    </div>
    
    <!-- 处理结果统计 -->
    <div v-if="processingSummary" class="processing-summary">
      <el-alert
        :title="processingSummary"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  processing: boolean
  progressPercentage: number
  currentProcessIndex: number
  totalProcessCount: number
  processingSummary: string
}>()

// 格式化进度显示
const progressFormat = (percentage: number) => {
  return `处理中 (${props.currentProcessIndex}/${props.totalProcessCount})`
}
</script>

<style scoped>
.progress-section {
  margin: 20px 0;
}

.progress-indicator {
  margin: 20px 0;
}

.processing-summary {
  margin: 15px 0;
}
</style>